<template>
    <vue-ueditor-wrap v-model="ueditor" @ready="initUE" :config="myConfig" style="width:100%;"></vue-ueditor-wrap>
</template>

<script>
    import VueUeditorWrap from 'vue-ueditor-wrap'

    export default {
        name: "index",
        data() {
            return {
                myConfig: {
                    'fontfamily': [
                        {label: '', name: 'songti', val: '宋体,SimSun'},
                        {label: '仿宋', name: 'fangsong', val: '仿宋,FangSong'},
                        {label: '仿宋_GB2312', name: 'fangsong', val: '仿宋_GB2312,FangSong'},
                        {label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai'},
                        {label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei'},
                        {label: '', name: 'heiti', val: '黑体, SimHei'},
                        {label: '', name: 'lishu', val: '隶书, SimLi'},
                        {label: '', name: 'andaleMono', val: 'andale mono'},
                        {label: '', name: 'arial', val: 'arial, helvetica,sans-serif'},
                        {label: '', name: 'arialBlack', val: 'arial black,avant garde'},
                        {label: '', name: 'comicSansMs', val: 'comic sans ms'},
                        {label: '', name: 'impact', val: 'impact,chicago'},
                        {label: '', name: 'timesNewRoman', val: 'times new roman'}
                    ],
                    // 初始容器高度
                    initialFrameHeight: 300,
                    // 初始容器宽度
                    initialFrameWidth: 900,
                    // 上传文件接口
                    elementPathEnable: false,
                    serverUrl: '/system/ueditor/getConfig', // 上传功能的后端服务器接口地址
                    UEDITOR_HOME_URL: '/UEditor/', // 你的UEditor资源存放的路径,相对于打包后的index.html
                    autoHeightEnabled: true, // 编辑器是否自动被内容撑高
                    autoFloatEnabled: false, // 工具栏是否可以浮动
                    enableAutoSave: true // 关闭自动保存
                },
                ueditor: '',
                init: false
            }
        },
        props: {
            value: String
        },
        watch: {
            value() {
                this.ueditor = this.value
            },
            ueditor() {
                this.$emit('change',this.ueditor)
            }
        },
        created() {
            this.ueditor = this.value
        },
        methods: {

            initUE() {
                UE.getUEBasePath('editor');
                UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
                UE.Editor.prototype.getActionUrl = function (action) {
                    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
                        return '/system/ueditor/upload';
                    } else if (action == 'uploadvideo') {
                        return '/system/ueditor/upload';
                    }
                };
            }
        },
        components: {
            VueUeditorWrap
        },
        model: {
            prop: 'value',
            event: 'change'
        }
    }
</script>

<style scoped lang="less">
    /deep/ .edui-editor {
        /deep/ .edui-button-body,/deep/.edui-menubutton-body,/deep/.edui-splitbutton-body {
            height: 20px;
           
        }

        /deep/ .edui-combox-body {
            height: 20px;
        }
    }
</style>
